import React from 'react';
import {Divider, Dropdown, Menu} from 'antd';
import {inject} from 'mobx-react';
import {Icon} from '../../../components';
import {ToolHistory, Tool} from '../../../utils';

import './index.scss';

/**
 * 布局头部
 */
@inject('store')
export default class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'ReactPC'
    };
  }
  render() {
    return (
      <div className="g-layout-header">
        <div className="left" onClick={this.goHome}>
          <p className="left-text1">{this.state.title}</p>
          <p className="left-text2">后 管 平 台</p>
        </div>
        <div className="right">
          <Icon type="user" className="right-icon" />
          {this.renderDropdown()}
          <Divider type="vertical" />
          <span className="right-text">{Tool.getUser().companyName}</span>
        </div>
      </div>
    );
  }

  /**
   * 下拉菜单
   */
  renderDropdown() {
    let menu = (
      <Menu mode="vertical">
        <Menu.Item key="0">
          <span onClick={this.loginOut}>退出登录</span>
        </Menu.Item>
      </Menu>
    );
    return (
      <Dropdown overlay={menu} trigger={['click']}>
        <a>
          <span className="right-text">{Tool.getUser().userName}</span>
          <Icon type="caret-down" className="right-icon" style={{fontSize: '14px'}} />
        </a>
      </Dropdown>
    );
  }

  /**
   * 返回首页
   */
  goHome() {
    ToolHistory.href('/');
  }

  /**
   * 退出登录
   */
  loginOut = () => {
    let {store} = this.props; //根Store
    store.login.loginOut(store); //退出登录
  };
}
